<template>
  <div class="dashboard-editor-container">

    <!-- 仪表板统计信息 -->
    <h1>仪表盘</h1>
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="box-card tech-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-user"></i>
              <!-- 修改为可用用户数量 -->
              <span>可用用户数量</span>
            </div>
          </template>
          <!-- 绑定值更新为 availableUsers -->
          <div class="card-content">{{ availableUsers }} </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card tech-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-user-solid"></i>
              <span>在线用户数量</span>
            </div>
          </template>
          <div class="card-content">{{ onlineUsers }} </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card tech-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-document"></i>
              <span>今日订单数</span>
            </div>
          </template>
          <div class="card-content">{{ todayOrders }} </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card tech-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-money"></i>
              <!-- 修改为今日订单总额 -->
              <span>今日订单总额</span>
            </div>
          </template>
          <!-- 绑定值更新为 todayOrderTotal -->
          <div class="card-content">{{ todayOrderTotal }} ¥</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 服务器带宽实时监控 -->
    <el-row class="chart-row" style="justify-content: flex-start;">
      <h2 class="chart-title">服务器带宽实时监控</h2>
      <!-- 传递 xAxisData 给 LineChart 组件 -->
      <line-chart :chart-data="bandwidthData" :x-axis-data="xAxisData" />
    </el-row>


  </div>
</template>

<script>
import LineChart from './dashboard/LineChart'
import {getRecentBandwidthSpeed, getDashboardData}  from "@/api/system/config";

const fetchDashboardData = async () => {
  let {data} =  await getDashboardData()
  console.log(data);
  return data;
};

/**
 * 从后台获取服务器带宽数据
 * @returns {Promise<Array>} 一个包含带宽数据的数组
 * 数据样例:
 * [
 *   {
 *     date: "2025-10-10 10:23:44",
 *     upload: 111,
 *     download: 222
 *   },
 *   {
 *     date: "2025-10-10 10:24:44",
 *     upload: 120,
 *     download: 230
 *   }
 * ]
 */
const fetchBandwidthDataFromBackend = async () => {
  let {data} =  await getRecentBandwidthSpeed();
  return data;
};

export default {
  name: "Index",
  components: {
    LineChart
  },
  data() {
    return {
      version: "3.8.7",
      availableUsers: 0,
      onlineUsers: 0,
      todayOrders: 0,
      todayOrderTotal: 0,
      bandwidthData: {
        upload: [],
        download: []
      },
      xAxisData: [],
      intervalId: null
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    async fetchData() {
      const dashboardData = await fetchDashboardData();
      this.availableUsers = dashboardData.availableUsers;
      this.onlineUsers = dashboardData.onlineUsers;
      this.todayOrders = dashboardData.todayOrders;
      this.todayOrderTotal = dashboardData.todayOrderTotal;
    },
    async updateBandwidthData() {
      const backendData = await fetchBandwidthDataFromBackend();
      this.xAxisData = backendData.map(item => item.date);
      this.bandwidthData.upload = backendData.map(item => item.upload);
      this.bandwidthData.download = backendData.map(item => item.download);
    }
  },
  mounted() {
    this.fetchData();
    this.updateBandwidthData();
    // 每 1 秒更新一次带宽数据
    this.intervalId = setInterval(() => {
      this.updateBandwidthData();
    }, 1000);

  },
  beforeDestroy() {
    // 清除定时器，避免内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
};
</script>

<style lang="css">
.dashboard-editor-container {
  padding: 32px;
  min-height: 100vh;
  position: relative;
}

.title {
  text-align: center;
  color: #000000; 
  font-size: 36px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-row {
  margin-top: 32px;
}

.tech-card {

  background-color: #e3f2fd; 
  border: 1px solid #2196F3; 
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(33, 150, 243, 0.2);
  }

  .card-header {
    display: flex;
    align-items: center;
    color: #2196F3; 
    font-size: 18px;
  }

  .card-header i {
    margin-right: 10px;
    font-size: 24px;
  }

  .card-content {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0;
    color: #2196F3; 
  }
}


.tech-card .el-card__body {
  background-color: #ffffff; 
  border-radius: 0 0 10px 10px; 
}

.chart-row {
  
  background-color: rgba(255, 255, 255, 0.9); 
  padding: 32px;
  margin-top: 32px;
  border: 1px solid #2196F3; 
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-title {
  text-align: center;
  color: #000000; 
  font-size: 28px;
  margin-bottom: 24px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
  .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
}

</style>